<template>
    <div style="margin: 10px;overflow: hidden">
        <div>
            <Form :model="formItem" :label-width="80">
                <Row :gutter='16'>
                    <Col span='6'>
                    <Select v-model="formItem.jiemaCode" label="玉米">
                       <Option v-for="item in jiemaCode" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                    </Col>
                    <Col span='6'><Input v-model="formItem.jiemaAccount" autocomplete="off" placeholder="接码平台账号" ></Input></Col>
                    <Col span='6'><Input v-model="formItem.jiemaPassWord" autocomplete="off" placeholder="接码平台密码" ></Input></Col>
                    <Col span='6'><Input v-model="formItem.kashangId" autocomplete="off" placeholder="指定卡商ID（选填）" ></Input></Col>
                </Row>
                </br>
                <Row :gutter='16'>
                    <Col span='3'><InputNumber  v-model="formItem.regCount" autocomplete="off" placeholder="注册个数" ></InputNumber></Col>
                    <Col span='4'>
                    <Select v-model="formItem.newType"  label="不限制">
                        <Option v-for="item in newType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                    </Col>
                    <Col span='4'>
                        <Select v-model="formItem.userName"  label="不设置用户名">
                            <Option v-for="item in userName" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </Col>
                    <Col span='4'>
                        <Select v-model="formItem.nameType"  label="名字随机组合">
                           <Option v-for="item in nameType" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </Col>
                    <Col span='4'>
                        <Select v-model="formItem.userPassword"  label="不设置二级密码">
                            <Option v-for="item in userPassword" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </Col>
                    <Col span='3'><Slider v-model="formItem.slider" :min='1' :max='12' :tip-format="format"></Slider></Col>
                    <Col span='2'>
                        <Button type="primary"  v-show="!this.$store.state.regButtn" @click="handleSubmit()">开始注册</Button>
                        <Button type="warning"  v-show="this.$store.state.regButtn" @click="stopSubmit()">停止注册</Button>
                    </Col>
                </Row>
        </Form>
        </div>
        <div class="regTable">
            <Row :gutter='16'>
                <Col span='20'><Table :data="tableData" :columns="userAccount" stripe></Table></Col>
                <Col span='4'> <Input v-model="operationLog" wrap="hard" readonly type="textarea" :autosize="{minRows: 20,maxRows: 50}" placeholder="日志"></Input></Col>
            </Row>
        </div>
    </div>
</template>
<script>
import { mapActions } from 'vuex'
import {SocketMessage} from '../util/SocketMessage'
export default {
    data () {
        return {
            operationLog: '',
            jiemaCode: [{
                value: 'yumi',
                label: '玉米'
            }, {
                value: 'thewolf',
                label: 'thewolf'
            }],
            newType: [{
                value: 'new',
                label: '全新账号'
            }, {
                value: 'nonew',
                label: '不限制'
            }],
            userName: [{
                value: 'rdname',
                label: '随机用户名'
            }, {
                value: 'noname',
                label: '不设置用户名'
            }],
            nameType: [{
                    value: '1',
                    label: '名字随机组合'
                }, {
                    value: '2',
                    label: '名字全中文'
                }, {
                    value: '3',
                    label: '名字全英文'
                }, {
                    value: '4',
                    label: '名字全中文+英文'
                }, {
                    value: '5',
                    label: '名字全英文+中文'
            }],
            userPassword: [{
                value: 'repassword',
                    label: '随机二级密码'
            }, {
                value: 'nopassword',
                label: '不设置二级密码'
            }],
            formItem: {
                jiemaCode: 'yumi',
                jiemaAccount: '',
                jiemaPassWord: '',
                newType: 'nonew',
                userName: 'noname',
                userPassword: 'nopassword',
                nameType: '1',
                kashangId: '',
                regCount: 1,
                slider: 1
            },
            tableData: [],
            userAccount: [
                {
                type: 'index',
                width: 60,
                align: 'center'
                },
                {
                title: '手机号',
                width: 120,
                key: 'phone'
                },
                {
                title: '用户名',
                key: 'username',
                render: (h, params) => {
                    return h('div', [
                    h('Icon', {
                        props: {
                        type: 'person'
                        }
                    }),
                    h('strong', params.row.uname)
                    ])
                }
                },
                {
                title: '名',
                key: 'lastname'
                },
                {
                title: '姓',
                key: 'firstname'
                },
                {
                title: '二级密码',
                key: 'localpassword'
                },
                {
                title: '状态',
                key: 'stateMsg'
                }
            ]
        }
    },
    created () {
        if (this.$store.state.regButtn) {
            this.formItem = this.$store.state.regTeleFrom
            this.operationLog = this.$store.state.operationLog
            this.onMessage()
        }
    },
    methods: {
        ...mapActions([
           'backups'
        ]),
        format (val) {
             return '线程数: ' + val
        },
        onMessage () {
            this.ws.onmessage = evt => {
                let sm = JSON.parse(evt.data)
                if (sm.message === 'REG') {
                    if (sm.body.code === 100) {
                        this.$store.state.regButtn = false
                    }
                    this.operationLog += `${sm.body.date + sm.body.msg}\r\n`
                    this.$store.state.operationLog = this.operationLog
                }
                if (sm.message === 'REGLIST') {
                    console.info(sm.body.list)
                    this.tableData = sm.body.list
                }
            }
        },
        handleSubmit () {
            if (!this.$store.state.websocketState) {
                this.$Modal.error({title: '提示', content: '网络状态不可用'})
                return
            }
            if (!this.formItem.jiemaAccount) {
                this.$Modal.info({title: '提示', content: '请填写接码平台账号'})
                return
            }
            if (!this.formItem.jiemaPassWord) {
                this.$Modal.info({title: '提示', content: '请填写接码平台密码'})
                return
            }
            this.$store.state.operationLog = ''
            this.operationLog = ''
            // let that = this
            if (this.formItem.jiemaCode === 'yumi') {
                this.tableData = []
                this.formItem.id = sessionStorage.getItem('id')
                let sm = new SocketMessage('REG', this.formItem)
                this.ws.send(JSON.stringify(sm))
                this.onMessage()
            }
            this.$store.state.regButtn = true
            this.backups(this.formItem)
        },
        stopSubmit () {
            this.$store.state.regButtn = false
        }
    }
}
</script>
<style lang="scss" scoped>
.regTable{
    margin-top: 1rem;
    border-top:1px solid #495060;
}

</style>
